<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>Example App</title>
        <!-- <link rel="stylesheet" href="main.bundle.css" /> -->
        <style>
            html,
            body {
                background-color: var(--spectrum-gray-100);
                color: var(--spectrum-gray-800);
            }
        </style>
    </head>

    <body>
        <sp-theme scale="medium" color="light">
            <sp-button variant="primary">Primary</sp-button>
            <br />
            <br />
            <sp-button variant="secondary" quiet>secondary</sp-button>
            <br />
            <br />
            <sp-field-label for="picker">Where do you live?</sp-field-label>
            <sp-picker id="picker">
                <span slot="label">
                    Select a Country with a very long label, too long in fact
                </span>
                <sp-menu-item>Deselect</sp-menu-item>
                <sp-menu-item>Select Inverse</sp-menu-item>
                <sp-menu-item>Feather...</sp-menu-item>
                <sp-menu-item>Select and Mask...</sp-menu-item>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-item>Save Selection</sp-menu-item>
                <sp-menu-item disabled>Make Work Path</sp-menu-item>
            </sp-picker>
        </sp-theme>
        <script async src="main.bundle.js"></script>
    </body>
</html>
